﻿<MCard Flat Tile>
    <MToolbar Color="cyan" Dark>
        <MAppBarNavIcon></MAppBarNavIcon>

        <MToolbarTitle>Application</MToolbarTitle>

        <MSpacer></MSpacer>

        <MButton Icon>
            <MIcon>mdi-magnify</MIcon>
        </MButton>
    </MToolbar>

    @foreach (var type in types)
    {
        <MContainer Class="grey lighten-4" Fluid>
            <MSubheader>@type</MSubheader>

            <MRow>
                <MSpacer></MSpacer>
                @foreach (var card in cards)
                {
                    <MCol Cols="12" Sm="6" Md="4">
                        <MCard>
                            <MImage Src="@($"https://picsum.photos/200/300?image={GetImage(type,card)}")" Height="300">
                                <span class="text-h5 white--text pl-4 pt-4 d-inline-block">@card</span>
                            </MImage>

                            <MCardActions Class="white justify-center">
                                @foreach (var social in socials)
                                {
                                    <MButton Color="@social.Color" Class="white-text" Fab Icon Small>
                                        <MIcon>@social.Icon</MIcon>
                                    </MButton>
                                }
                            </MCardActions>
                        </MCard>
                    </MCol>
                }
            </MRow>
        </MContainer>
    }
</MCard>

@code
{
    string[] cards = new string[3] {"Good", "Best", "Finest"};
    
    List<Social> socials = new List<Social>
    {
        new Social {Icon = "mdi-facebook", Color = "indigo"},
        new Social {Icon = "mdi-linkedin", Color = "cyan darken-1"},
        new Social {Icon = "mdi-instagram", Color = "red lighten-3"}
    };
    
    string[] types = new string[2] {"Places to Be", "Places to See"};

    double GetImage(string type, string card)
    {
        var row = Array.IndexOf(types, type);
        var col = Array.IndexOf(cards, card)+1;

        return 550 + types.Length * row + col;
    }
    
    public class Social
    {
        public string Icon { get; set; }
        public string Color { get; set; }
    }
}